#Flexbox Layout in CSS

Previously, the elements we placed on a webpage were arranged in the order they were written, and block elements always occupied an entire line, which limited our control. For example, in the Semantic HTML section, the aside element was used as a sidebar, but it appeared on its own line instead of being placed to the side.

In this section, we’ll learn about Flexbox, one of the most commonly used layout techniques in CSS. Flexbox allows us to easily control the alignment, distribution, and ordering of elements inside a container.

By setting an element’s display property to flex, the element becomes a flex container, and its immediate child elements no longer occupy an entire line.

Example:

<div style="display:flex; height:100px;">
    <main style="background-color:#212121; color:cyan;">
        main
    </main>
    <aside style="background-color:#666; color:yellow;">
        aside
    </aside>
</div>

HTML

    
        main
    
    
        aside

#Main Axis and Cross Axis

In a flex container, the default main axis is horizontal, and the cross axis is vertical. Child elements are arranged along the main axis.

You can change the direction using the container’s flex-direction property:

row – Horizontal is the main axis; vertical is the cross axis
column – Vertical is the main axis; horizontal is the cross axis

Example:

<div style="display:flex; flex-direction:column; height:100px;">
    <main style="background-color:#212121; color:cyan;">
        main
    </main>
    <aside style="background-color:#666; color:yellow;">
        aside
    </aside>
</div>

HTML

    
        main
    
    
        aside

#flex-grow and flex-shrink

When the total length of child elements is less than the container’s main axis, you can use flex-grow to make them grow to fill the space.

Example:

<div style="display:flex; height:100px;">
    <main style="flex-grow:5; background-color:#212121; color:cyan;">
        main
    </main>
    <aside style="flex-grow:1; background-color:#666; color:yellow;">
        aside
    </aside>
</div>

HTML

    
        main
    
    
        aside

Similarly, when the total length of child elements exceeds the container, you can use flex-shrink to allow them to shrink.

The values of flex-grow and flex-shrink represent the ratio in which space is added or reduced. In the example above, main receives of the remaining space, while aside receives .

#Alignment on the Main Axis

By default, child elements align to the start of the main axis. You can change this behavior using the container’s justify-content property:

start – Align to the start of the main axis
end – Align to the end of the main axis
center – Center along the main axis
space-between – Evenly distributed, no space on the ends
space-around – Evenly distributed, with half-space on the ends
space-evenly – Even spacing between and on the ends

Example:

<div style="display:flex; justify-content:start; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:end; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:center; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:space-between; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:space-around; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; justify-content:space-evenly; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

justify-content:start

    item
    item
    item

justify-content:end

    item
    item
    item

justify-content:center

    item
    item
    item

justify-content:space-between

    item
    item
    item

justify-content:space-around

    item
    item
    item

justify-content:space-evenly

    item
    item
    item

#Alignment on the Cross Axis

By default, child elements stretch to fill the cross axis. This can be changed using the align-items property:

stretch – Stretch to fill the cross axis
start – Align to the start of the cross axis
end – Align to the end of the cross axis
center – Center along the cross axis

Example:

<div style="display:flex; align-items:stretch; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; align-items:start; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; align-items:end; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

<div style="display:flex; align-items:center; height:100px; background-color:#212121;">
    <div style="background-color:red;color:white;">item</div>
    <div style="background-color:green;color:white;">item</div>
    <div style="background-color:blue;color:white;">item</div>
</div>

align-items:stretch

    item
    item
    item

align-items:start

    item
    item
    item

align-items:end

    item
    item
    item

align-items:center

    item
    item
    item

#Wrapping

By default, when the total width of child elements exceeds the container, they overflow. You can use the flex-wrap property to allow wrapping:

nowrap – No wrapping
wrap – Wrap to the next line when space is insufficient
wrap-reverse – Same as wrap, but lines are reversed

Example:

<div style="display:flex; align-items:center; flex-wrap:nowrap; background-color:#212121;">
    <div style="background-color:red;color:white; width:80px;">item</div>
    <div style="background-color:green;color:white; width:80px;">item</div>
    <div style="background-color:blue;color:white; width:80px;">item</div>
    <div style="background-color:orange;color:white; width:80px;">item</div>
    <div style="background-color:purple;color:white; width:80px;">item</div>
    <div style="background-color:cyan;color:white; width:80px;">item</div>
</div>

<div style="display:flex; align-items:center; flex-wrap:wrap; background-color:#212121;">
    <div style="background-color:red;color:white; width:80px;">item</div>
    <div style="background-color:green;color:white; width:80px;">item</div>
    <div style="background-color:blue;color:white; width:80px;">item</div>
    <div style="background-color:orange;color:white; width:80px;">item</div>
    <div style="background-color:purple;color:white; width:80px;">item</div>
    <div style="background-color:cyan;color:white; width:80px;">item</div>
</div>

<div style="display:flex; align-items:center; flex-wrap:wrap-reverse; background-color:#212121;">
    <div style="background-color:red;color:white; width:80px;">item</div>
    <div style="background-color:green;color:white; width:80px;">item</div>
    <div style="background-color:blue;color:white; width:80px;">item</div>
    <div style="background-color:orange;color:white; width:80px;">item</div>
    <div style="background-color:purple;color:white; width:80px;">item</div>
    <div style="background-color:cyan;color:white; width:80px;">item</div>
</div>

flex-wrap:nowrap

    flex-wrap:nowrap
    
        item
        item
        item
        item
        item
        item

flex-wrap:wrap

    flex-wrap:nowrap
    
        item
        item
        item
        item
        item
        item

flex-wrap:wrap-reverse

    flex-wrap:nowrap
    
        item
        item
        item
        item
        item
        item

#Aligning Rows on the Cross Axis

Use the align-content property to align multiple rows on the cross axis:

start – Align rows to the start of the cross axis
end – Align rows to the end of the cross axis
center – Center rows on the cross axis
space-between – Evenly spaced rows, no space at ends
space-around – Evenly spaced with half-space at ends
space-evenly – Even spacing including the ends

Example:

<div style="display:flex; align-content:start; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:end; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:center; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:space-between; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:space-around; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

<div style="display:flex; align-content:space-evenly; align-items:start; flex-wrap:wrap; height:100px; width:80px; background-color:#212121;">
    <div style="background-color:red;color:white; width:40px;">item</div>
    <div style="background-color:green;color:white; width:40px;">item</div>
    <div style="background-color:blue;color:white; width:40px;">item</div>
</div>

align-content:start

    item
    item
    item

align-content:end

    item
    item
    item

align-content:center

    item
    item
    item

align-content:space-between

    item
    item
    item

align-content:space-around

    item
    item
    item

align-content:space-evenly

    item
    item
    item